/*
  学习目标：useState使用的三个注意事项, 一个规范问题
  步骤：
     1. 可以多次调用useState声明多个状态
*/

import React from 'react';
import { useState } from 'react';

export default function App() {
  //   1. 可以多次调用useState声明多个状态
  const [count, setCount] = useState(100);
  const [msg, setMsg] = useState('hello React');
  // 2. useState可以声明任意数据类型
  const [zs, setZs] = useState({ name: 'zs', age: 18 });
  //

  // 👍 const [变量名 , set+驼峰变量名] = useState(初始值)
  const [list, setList] = useState([]);

  return (
    <div>
      <h1>{zs.name}</h1>
      <button
        onClick={() => {
          // 3. ✅ 新值覆盖旧值
          setZs({ ...zs, name: 'ls' }); // {}
          // ❌ 不允许修改原始数据
          // zs.name = 'ls';
        }}
      >
        点我修改zs的名字
      </button>
    </div>
  );
}
